<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>码猿博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="sweetAlert/sweetalert.css">
    <link rel="ICON" href="image/projectImage/icon1.png">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body style="background-color: #f1f1f1">
<div style="margin-top: 50px;margin-left: 50px">
    <a href="./my_home" title="码猿主页"><img src="./image/projectImage/logo2.png" width="160" height="80" alt=""></a>
</div>
<div class="login-modal" id="login_modal" style="box-shadow: 2px 2px 5px #333">
    <div class="login-header">
        <h1>
            <span v-bind:class="{'active-title':loginWindow=='signIn'}" id="signIn" v-on:click="signIn_btn()">登录</span>
            <span v-bind:class="{'active-title':loginWindow=='signUp'}" id="signUp" v-on:click="signUp_btn()">注册</span>
        </h1>
    </div>
    <div class="login-body m-t-30">
        <div class="clearfix">
            <div class="f-l">
                <form id="signIn-form" v-show="loginWindow=='signIn'" autocomplete="off">
                    <div class="input-group m-b-20">
                        <input name="username" type="text" maxlength="37" class="form-control" placeholder="请输入登录账号">
                    </div>
                    <div class="input-group m-b-20">
                        <input name="password" type="password" class="form-control" placeholder="请输入登录密码" maxlength="16" autocomplete="off">
                    </div>
                    <div class="my-group my-appendix clearfix">
                        <a href="./forgetPassword" class="my-forget f-l">忘记密码 </a>
                        <p class="color-red f-r" v-show="incorrect" style="display: none">账号或密码错误</p>
                    </div>
                    <div class="my-group clearfix">
                        <input type="button" value="登录" class="sign-btn" id="signIn-btn" v-on:click="sign_btn_click_submit">
                    </div>
                </form>
                <div id="signUp-form" v-show="loginWindow=='signUp'" autocomplete="off" style="display: none">
                    <div class="input-group">
                        <input type="text" onkeyup="value=value.replace(/[^\w]/ig,'')" v-on:blur="my_a" v-model.trim="registerData.newAccount" maxlength="37" class="form-control" placeholder="请输入注册的账号">
                    </div>
                    <p class="my-tip-wrap color-red">{{formValidation.newAccount}}</p>
                    <div class="input-group">
                        <input type="text"v-on:blur="my_n" v-model="registerData.newUsername" maxlength="18" class="form-control" placeholder="请输入注册的用户名">
                    </div>
                    <p class="my-tip-wrap color-red">{{formValidation.newUsername}}</p>
                    <div class="input-group">
                        <input type="email" v-on:blur="my_e" v-model="registerData.newEmail" maxlength="18" class="form-control" placeholder="请输入你的邮箱">
                    </div>
                    <p class="my-tip-wrap color-red">{{formValidation.newEmail}}</p>
                    <div class="input-group">
                        <input type="password" v-on:blur="my_p" v-model="registerData.newPassword" class="form-control" placeholder="请输入登录密码，6-16位密码，区分大小写" maxlength="18" autocomplete="off">
                    </div>
                    <p class="my-tip-wrap color-red">{{formValidation.newPassword}}</p>
                    <div class="input-group">
                        <input type="password" v-on:blur="my_r" v-model="registerData.newRePassword" class="form-control" placeholder="请确认登录密码，6-16位密码，区分大小写" maxlength="18" autocomplete="off">
                    </div>
                    <p class="my-tip-wrap color-red">{{formValidation.newRePassword}}</p>
                    <div class="my-group clearfix">
                        <input type="button" value="注册" v-bind:disabled="!isSignUpBtn" class="sign-btn" id="signUp-btn" v-on:click="signUp_btn_click">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.0.0.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="sweetAlert/sweetalert.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var vm_userLogin=new Vue({
        el:'#login_modal',
        data:{
            updatePassModal:false,
            loginWindow:'signIn',
            isOK:false,
            isLogin:false,
            incorrect:false,
            LoginAccount:'',
            LoginName:'',
            userAccounts:'',
            isSignUpBtn:true,
            formValidation:{
                newAccount:'',
                newUsername:'',
                newEmail:'',
                newPassword:'',
                newRePassword:''
            },
            loginData:{
                account:'',
                password:''
            },
            registerData:{
                newAccount:'',
                newUsername:'',
                newEmail:'',
                newPassword:'',
                newRePassword:''
            }
        },
        methods:{
            signIn_btn:function () {
                this.loginWindow='signIn'
            },
            signUp_btn:function () {
                this.loginWindow='signUp'
            },
            sign_btn_click_submit:function () {
                $.ajax({
                    type:'POST',
                    url:'./userLogin',
                    dataType: 'text',
                    data: $("#signIn-form").serialize(),
                    success: function (data, textStatus, request) {
                        console.log(textStatus);
                        if (request.getResponseHeader('IsLogin')){
                            console.log(window.history);
                            vm_userLogin.incorrect=false;
                            window.history.go(-1)
                        }else{
                            vm_userLogin.incorrect=true;
                        }
                    }
                })
            },
            signUp_btn_click:function(){
                var registerData={
                    account:'',
                    username:'',
                    email:'',
                    password:'',
                    headImg:'',
                };
                if(vm_userLogin.registerData.newAccount.length<4||vm_userLogin.registerData.newAccount.length>18) {
                    vm_userLogin.formValidation.newAccount = '请输入正确的4-18位账号';
                }
                if(vm_userLogin.registerData.newUsername==''){
                    this.formValidation.newUsername='用户名不能为空';
                }
                if(vm_userLogin.registerData.newEmail==''){
                    vm_userLogin.formValidation.newEmail='邮箱不能为空';
                }
                if(vm_userLogin.registerData.newPassword.length<4||vm_userLogin.registerData.newPassword.length>18){
                    vm_userLogin.formValidation.newPassword='请输入正确的4-18位密码';
                }
                if(vm_userLogin.registerData.newRePassword!=this.registerData.newPassword){
                    vm_userLogin.formValidation.newRePassword='两次的密码不一致';
                }
                if(vm_userLogin.formValidation.newAccount==''&&
                    vm_userLogin.formValidation.newUsername==''&&
                    vm_userLogin.formValidation.newPassword==''&&
                    vm_userLogin.formValidation.newRePassword==''){
                    registerData.account=vm_userLogin.registerData.newAccount;
                    registerData.username=vm_userLogin.registerData.newUsername;
                    registerData.email=vm_userLogin.registerData.newEmail;
                    registerData.password=vm_userLogin.registerData.newRePassword;
                    registerData.headImg='image/userImage/'+vm_userLogin.registerData.newAccount+'/userInfo.png';
                    vm_userLogin.isSignUpBtn=false;
                    console.log(registerData);
                    $.ajax({
                        type:"POST",
                        url:"./addAccount",
                        data: JSON.stringify(registerData),
                        contentType : "application/json ; charset=utf-8",
                        success:function (data) {if(data) {
                            succeed_result("注册");
                        } else {
                            fail_result("注册", function() {});
                        }
                        },
                        error: function(xhr, status, error) {
                            fail_result("请求服务器", function() {});
                        }
                    });
                }
            },
            my_a:function(){
                var account=this.registerData.newAccount;
                if(account.length<4||account.length>18) {
                    this.formValidation.newAccount = '请输入正确的4-18位账号';
                }else{
                    $.ajax({
                        type:"GET",
                        url:"./get_allAccount",
                        data:"account="+account,
                        success:function (data) {
                            if(data){
                                vm_userLogin.formValidation.newAccount='';
                            }else{
                                vm_userLogin.formValidation.newAccount='账号已存在';
                            }
                        }
                    });
                }
            },
            my_n:function(){
                if(this.registerData.newUsername==''){
                    this.formValidation.newUsername='用户名不能为空';
                }else{
                    this.formValidation.newUsername='';
                }
            },
            my_e:function(){
                var isEmail=true;
                var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                var value = this.registerData.newEmail;
                if(value==''){
                    this.formValidation.newEmail='邮箱不能为空';
                }else if(!reg.test(value)) {
                    this.formValidation.newEmail='请输入正确邮箱地址';
                }else{
                    this.formValidation.newEmail=''
                }
            },
            my_p:function(){
                if(this.registerData.newPassword.length<4||this.registerData.newPassword.length>18){
                    this.formValidation.newPassword='请输入正确的4-18位密码';
                }else{
                    this.formValidation.newPassword=''
                }
            },
            my_r:function(){
                if(this.registerData.newRePassword!=this.registerData.newPassword){
                    this.formValidation.newRePassword='两次的密码不一致';
                }else{
                    this.formValidation.newRePassword=''
                }
            },
        }
    });

    //提交数据返回失败的结果后
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新操作",
            type: "error",
            confirmButtonText: "确定",
        }, function(bool) {
            fn();
        });
    }

    //在后端返回处理成功的信息后询问是否要刷新页面
    function succeed_result(operation_name) {
        swal({
            title: operation_name + "成功！",
            text: "即将跳转回主页",
            type: "info",
            confirmButtonText: "刷新",
        }, function(bool) {
            if(bool) {
                $.ajax({
                    type:"GET",
                    url:"/logout",
                    success:function (data) {
                        if(data){
                            window.location.href='./my_home'
                        }
                    }
                });
            }
        });
    }
</script>
</body>
</html>